<div class="shelf-creator">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-bookmark header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">Create New Shelf</h2>
      <p class="panel-description">Add a custom shelf to organize your books</p>
    </div>
    <p-button
      icon="pi pi-times"
      (click)="cancel()"
      severity="secondary"
      [text]="true"
      [rounded]="true"
      class="close-button"
      pTooltip="Close"
      tooltipPosition="left"/>
  </div>

  <div class="form-container">
    <div class="form-group highlight-group">
      <label for="shelfName" class="form-label">
        <i class="pi pi-tag label-icon"></i>
        Shelf Name
        <span class="required-indicator">*</span>
      </label>
      <div class="input-wrapper">
        <input
          id="shelfName"
          type="text"
          pInputText
          [(ngModel)]="shelfName"
          class="input-full"
          placeholder="e.g., Favorites, To Read, Currently Reading"
          [class.filled]="shelfName.trim()"
          autofocus
        />
        @if (shelfName.trim()) {
          <i class="pi pi-check-circle input-icon success"></i>
        }
      </div>
    </div>

    <div class="gradient-divider"></div>

    <div class="form-group highlight-group">
      <label class="form-label">
        <i class="pi pi-palette label-icon"></i>
        Shelf Icon (Optional)
      </label>
      @if (!selectedIcon) {
        <button class="icon-select-btn" (click)="openIconPicker()" type="button">
          <i class="pi pi-plus"></i>
          <div class="btn-content">
            <span class="btn-title">Choose an Icon</span>
            <span class="btn-subtitle">Select from available icons</span>
          </div>
        </button>
      } @else {
        <div class="selected-icon-display">
          <div class="icon-preview">
            <app-icon-display
              [icon]="selectedIcon"
              size="24px"
            />
          </div>
          <div class="icon-info">
            <span class="icon-label">Selected Icon</span>
            <span class="icon-name">
              @if (selectedIcon.type === 'PRIME_NG') {
                {{ selectedIcon.value }}
              } @else {
                {{ selectedIcon.value }}
              }
            </span>
          </div>
          <p-button
            icon="pi pi-times"
            severity="danger"
            [outlined]="true"
            [rounded]="true"
            size="small"
            (onClick)="clearSelectedIcon()"
            pTooltip="Remove icon"
            tooltipPosition="left"
          />
        </div>
      }
    </div>
  </div>

  <div class="dialog-footer">
    <div class="validation-status">
      @if (!shelfName.trim()) {
        <div class="validation-message error">
          <i class="pi pi-exclamation-circle"></i>
          <span>Shelf name is required</span>
        </div>
      } @else {
        <div class="validation-message success">
          <i class="pi pi-check-circle"></i>
          <span>Ready to create</span>
        </div>
      }
    </div>
    <div class="footer-actions">
      <p-button
        label="Cancel"
        severity="secondary"
        [outlined]="true"
        (onClick)="cancel()"
      />
      <p-button
        label="Create Shelf"
        icon="pi pi-plus"
        severity="success"
        (onClick)="createShelf()"
        [disabled]="!shelfName.trim()"
      />
    </div>
  </div>
</div>
